<template>
  <div class="Studentteacher">
    <div class="Studentteacher-title">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/views/Learningcenter/Authenticationmanagement' }">认证管理</el-breadcrumb-item>
        <el-breadcrumb-item>入驻助学师</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="Studentteacher-con">
      <div class="Student-content">
        <div class="Student-content-head">
          <h1>入驻助学师</h1>
          <h3>聊天就能赚钱</h3>
        </div>
        <div class="Student-content-content">
          <ul>
            <li v-for="(item,index) in inList" :key="index" @click="injoin(index)">
              <div>
                <span class="List-title">{{item.title}}</span>
                <label class="List-price">
                  <span>{{item.price}}元/月</span>
                  <span>{{item.timers}}</span>
                </label>
                <ul class="Position-details">
                  <li>职位详情</li>
                  <li v-for="(itms,e) in item.Positiondetails" :key="e">{{itms}}</li>
                </ul>
                <ul class="In-requirements">
                  <li>入驻要求</li>
                  <li v-for="(items,el) in item.Inrequirements" :key="el">{{items}}</li>
                </ul>
              </div>
              <label class="Theselected">
                <img src="/images/选中@2x.png" v-if="checked == index" />
              </label>
            </li>
          </ul>
          <p class="Benefits-that">收益说明：助学师在外教超市平台入驻不收取任何费用，可获得30%-60%的课程费用收益</p>
          <label class="agreement">
            <el-checkbox v-model="agree" @change="Toread()">我同意《外教超市入驻助学师说明》</el-checkbox>
          </label>
          <label class="Immediately-checkin" @click="submit">
            <span>立即入驻</span>
          </label>
        </div>
      </div>
    </div>
    <!--协议弹窗-->
    <div class="readagreements" v-show="Isread">
      <div class="readagreement">
          <Agremment></Agremment>
          <label class="agreement">
              <el-checkbox v-model="agree" @change="TocloseRead">我已仔细阅读《外教超市入驻助学师说明》并同意</el-checkbox>
          </label>
        
      </div>
    </div>
    <!-- //选择班级弹窗模块 -->
    <div v-show="popup">
      <!--这里是要展示的内容层-->
        <div class="login">
            <div class="popup_title">{{titleType}}</div>
            <!-- <div class="popup_cloose" @click="closepopup"></div> -->
            <div class="popup_cloose" @click="closePopup">×</div>
            <div class="popup_content">
                <label class="popup_identity">
                    <i>*</i>
                    <span>身份</span>
                    <el-select v-model="identity_type">
                        <el-option v-for="(item,index) in translateIdentity" :key="index" :label="item.identity_typeC" :value="item.identity_typeC"></el-option>
                    </el-select>
                </label>
                <label class="popup_nationality">
                    <i>*</i>
                    <span>国籍</span>
                    <el-select v-model="nationality">
                        <el-option v-for="(item,index) in nationality_typeList" :key="index" :label="item.languageC" :value="item.languageC"></el-option>
                    </el-select>
                </label>
                <label class="popup_sex">
                    <i>*</i>
                    <span>性别</span>
                    <el-select v-model="sex">
                        <el-option v-for="(item,index) in sexList" :key="index" :label="item.sexname" :value="item.sexname"></el-option>
                    </el-select>
                </label>
                <label class="popup_graduation_school">
                    <i>*</i>
                    <span>毕业学校</span>
                    <input placeholder="请填写学校" autocomplete="off" type="text" name="username" v-model="graduation_school"/>
                </label>
                <label class="popup_education">
                    <i>*</i>
                    <span>学历</span>
                    <input placeholder="请填写学历" autocomplete="off" type="text" name="username" v-model="education"/>

                </label>
                <label class="popup_specialty">
                    <i>*</i>
                    <span>专业</span>
                    <input placeholder="请填写专业" autocomplete="off" type="text" name="username" v-model="specialty"/>

                </label>
                <label class="popup_mobile">
                    <i>*</i>
                    <span>手机号</span>
                    <input placeholder="请填写手机号" autocomplete="off" type="text" name="username" v-model="mobile"/>

                </label>
                <label class="popup_mail">
                    <i>*</i>
                    <span>邮箱</span>
                    <input placeholder="请填写邮箱" autocomplete="off" type="text" name="username" v-model="mail"/>

                </label>
                <label>
                    <i>*</i>
                    <span>个人简介</span>
                    <el-input placeholder="请填写简介" type="text" v-model="introduction" maxlength="200" show-word-limit class="popup_introduction" minRows= 2></el-input>
                </label>
                <label v-if="checked !==3">
                    <i>*</i>
                    <span>母语</span>
                    <el-select v-model="mother_tongue">
                        <el-option v-for="(item,index) in nationality_typeList" :key="index" :label="item.languageC" :value="item.languageC"></el-option>
                    </el-select>
                </label>
                <label>
                  <i>*</i>
                  <span>掌握语言</span>
                  <!-- collapse-tags 是否叠加显示，此处位置有限，叠加 -->
                  <el-select multiple collapse-tags v-model='language' @change='changeSelect' @remove-tag='removeTag' placeholder='请选择掌握语言'>
                      <el-option v-for='(item, index) in nationality_typeList' :key='index' :label='item.languageC' :value='item.languageC'></el-option>
                  </el-select>
                </label>
                <label v-if="checked !== 0">
                  <i>*</i>
                  <span>教学语言</span>
                  <el-select multiple collapse-tags v-model='teach_language' @change='changeSelect1' @remove-tag='removeTag' placeholder='请选择掌握语言'>
                      <el-option v-for='(item, index) in nationality_typeList' :key='index' :label='item.languageC' :value='item.languageC'></el-option>
                  </el-select>
                </label>
                <label class="popup_cover" v-if="checked !== 0">
                  <i>*</i>
                  <span>相关{{checked == 1?'跨境证明材料':checked == 2?'语言等级证书':'工作证明材料'}}</span>
                <el-upload
                  class="popup_uploader"
                  :action="domain"
                  :show-file-list="false"
                  :data="QiNiYun"
                  :before-upload="getQiniuToken"
                  :on-success="successUploader"
                >
                  <div>{{show_science == ''?'请上传材料':'选择此图'}}</div>
                  <img v-if="show_science" :src="show_science" class="creat_avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon creat_i"></i>
                </el-upload>
              </label>
            </div>
            
            
            <div @click="submitSettle" class="popup_submit">提交</div>
        </div>
      <!--这里是半透明背景层-->
      <div class="over" ></div>
    </div>
  </div>
</template>
<script>
import Agremment from '../Personalcenterlist/agreements'
export default {
  name: "Studentteacher",
  data() {
    return {
      //mother_tongue 母语  private_education 私教  cross_border跨境  major 专业
      kuajing_science:'',
      zhuanye_science:'',
      sijiao_sciecne:'',
      show_science:'',
      QiNiYun: {
        key: "",
        token: ""
      },
      domain: "http://up-z0.qiniup.com",
      upload_qiniu_addr: "http://img.curiousmore.com/",
      nationality:'',
      nationality_typeList:[
            {
                languageE:"Estonian",
                languageC:"爱沙尼亚语"
                },
            {
                languageE:"Arabic",
                languageC:"阿拉伯语"
                },
            {
                languageE:"Bulgarian",
                languageC:"保加利亚语"
                },
            {
                languageE:"polish",
                languageC:"波兰语"
                },
            {
                languageE:"Danish",
                languageC:"丹麦语"
                },
            {
                languageE:"German",
                languageC:"德语"
                },
            {
                languageE:"Russian",
                languageC:"俄语"
                },
            {
                languageE:"Traditional Chinese",
                languageC:"繁体中文"
                },
            {
                languageE:"French",
                languageC:"法语"
                },
            {
                languageE:"Finnish",
                languageC:"芬兰语"
                },
            {
                languageE:"Korean",
                languageC:"韩语"
                },
            {
                languageE:"Dutch",
                languageC:"荷兰语"
                },
            {
                languageE:"Czech",
                languageC:"捷克语"
                },
            {
                languageE:"romanian",
                languageC:"罗马尼亚语"
                },
            {
                languageE:"Portuguese",
                languageC:"葡萄牙语"
                },
            {
                languageE:"Japanese",
                languageC:"日语"
                },
            {
                languageE:"Swedish",
                languageC:"瑞典语"
                },
            {
                languageE:"slovenian",
                languageC:"斯洛文尼亚语"
                },
            {
                languageE:"Thai",
                languageC:"泰语"
                },
            {
                languageE:"Spanish",
                languageC:"西班牙语"
                },
            {
                languageE:"Greek",
                languageC:"希腊语"
                },
            {
                languageE:"hun",
                languageC:"匈牙利语"
                },
            {
                languageE:"Italian",
                languageC:"意大利语"
                },
            {
                languageE:"English",
                languageC:"英语"
                },
            {
                languageE:"Vietnamese",
                languageC:"越南语"
                },
            {
                languageE:"cantonese",
                languageC:"粤语"
                },
            {
                languageE:"Chinese",
                languageC:"中文"
                }
        ],
      popup: 0,
      Isread:false,
      checked: -1,
      agree: false,
      inList: [
        {
          title: "母语助学师",
          price: "198-258",
          timers: "每节课30分钟",
          Positiondetails: ["负责为报名学员安排课程计划", "辅导学员语言学习"],
          Inrequirements: ["教学语言为本人母语"]
        },
        {
          title: "跨境助学师",
          price: "128-168",
          timers: "每节课30分钟",
          Positiondetails: [
            "负责为报名学员安排课程计划",
            "辅导学员语言学习",
            "辅导学员语言学习"
          ],
          Inrequirements: [
            "具备跨境语言能力",
            "在语言所在国有学习、工作、经商、生活经验"
          ]
        },
        {
          title: "专业助学师",
          price: "198-258",
          timers: "每节课30分钟",
          Positiondetails: ["负责为报名学员安排课程计划", "辅导学员语言学习"],
          Inrequirements: ["教学语言为本人母语"]
        },
        // {
        //   title: "私教",
        //   price: "198-258",
        //   timers: "每节课30分钟",
        //   Positiondetails: ["负责为报名学员安排课程计划", "辅导学员语言学习"],
        //   Inrequirements: ["教学语言为本人母语"]
        // }
      ],
      inListindex: "",
      unserinfo: JSON.parse(localStorage.getItem("userinfo")),
      identity_type:'', 
      translateIdentity:[
            {identity_typeE:'overseas_student',identity_typeC:'留学生'},
            {identity_typeE:'overseas_chinese',identity_typeC:'华侨'},
            {identity_typeE:'ethnic_chinese',identity_typeC:'华裔'},
            {identity_typeE:'overseas_staff',identity_typeC:'境外工作者'},
            {identity_typeE:'overseas_government_personnel',identity_typeC:'政府境外工作者'},
            {identity_typeE:'overseas_chinese_learners',identity_typeC:'中文爱好者'}, 
            {identity_typeE:'language_teacher',identity_typeC:'全职语言老师'},
            {identity_typeE:'language_teacher_concurrent',identity_typeC:'全职语言老师'},
            {identity_typeE:'language_teacher',identity_typeC:'兼职语言老师'},
            {identity_typeE:'overseas_nationality',identity_typeC:'国籍'},
            {identity_typeE:'overseas_merchant',identity_typeC:'境外商人'},
            {identity_typeE:'student',identity_typeC:'学生'},
        ],
        titleType:'',
        sexList:[
          {sexstatus:1,sexname:'男'},
          {sexstatus:2,sexname:'女'},
        ],
        sex:'', 
        graduation_school:'',
        education:'',
        specialty:'',
        mobile:'',
        mail:'',
        introduction:'',
        mother_tongue:'',
        language:[],
        teach_language:[],
    };
  },
  components: {//组件注册
    Agremment,
  },
  mounted() {
    this.getQiniuToken();
  },
  methods: {
    successUploader(res, file) {
      this.show_science = this.upload_qiniu_addr + res.key;
      if(this.checked == 1){
        this.kuajing_science = this.upload_qiniu_addr + res.key;
      }else if (this.checked ==2){
        this.zhuanye_science = this.upload_qiniu_addr + res.key;
      }
      else if (this.checked ==3){
        this.sijiao_science = this.upload_qiniu_addr + res.key;
      }
    },
    getQiniuToken() {
      var data = {
        key: this.guid(),
        type: "pic"
      };
      this.$axios({
        method: "POST",
        url: "http://101.37.66.151:8768/eg-api/push/upload/getToken",
        data: data
      })
        .then(response => {
          this.QiNiYun.token = response.data.data;
          this.QiNiYun.key = data.key;
        })
        .catch(error => {
          console.log(error);
        });
    },
    changeSelect(val) {
      this.language = val
      console.log(this.language)
    },
    changeSelect1(val) {
      this.teach_language = val
      console.log(this.teach_language)
    },
    removeTag(val) {
      if (val === '全选') {
        this.selectedArray = []
      }
    },
    closePopup(){
      this.popup = 0
      this.show_science = ''
    },
    submitSettle(){
        let identity,sex
          this.translateIdentity.map(item=>{
            if(this.identity_type == item.identity_typeC){
              identity = item.identity_typeE
            }
          })
          this.sexList.map(item=>{
            if(this.sex == item.sexname){
              sex = item.sexstatus
            }
          })
          this.nationality_typeList.map(item=>{
            if(this.language !== []){
              this.language.map((info,index)=>{
              if(info == item.languageC){
                this.language[index] = item.languageE
              }
            })
            }
            
            if(this.teach_language !== []){
              this.teach_language.map((info,index)=>{
                if(info == item.languageC){
                this.language[index] = item.languageE
              }
            })
            }
            
            if(this.nationality == item.languageC){
              this.nationality = item.languageE
            }
            if(this.mother_tongue == item.languageC){
              this.mother_tongue = item.languageE
            }
          })
          
          this.language = this.language.join(",")
          this.teach_language = this.teach_language.join(",")
          let data = {
            education: this.education,
            grade: 1,
            graduation_school: this.graduation_school,
            identity: identity,
            introduction: this.introduction,
            language: this.language,
            language_url: "",
            mail: this.mail,
            mobile: this.mobile,
            mother_tongue: this.mother_tongue,
            mother_tongue_url: "",
            nationality: this.nationality,
            sex: sex,
            specialty: this.specialty,
            teach_language: this.teach_language,
            teach_language_url: "",
              //"mother_tongue 母语  private_education 私教  cross_border跨境  major 专业"
            type:this.checked ==0?'mother_tongeu':this.checked == 1 ?'cross_border':this.checked == 2?'major':'cross_border',
            user_id: this.unserinfo.user_id
        };
        console.log(data)
        this.$axios({
        method: "POST",
        url: "http://101.37.66.151:8768/eg-api/user/masterInfo/insert",
        data: data
      }).then(res => {
          console.log(res.data)
          if(res.data.code == 0){
            this.$message('提交成功，请等待审核')
            this.popup = 0
            this.$router.push({ path: "/views/Learningcenter/Liveclassroom"});
          }else{
            this.$message(res.data.message)
          }
        }).catch(error => {
          console.log(error);
        });
      },
    submit() {
      if(this.agree == false){
          this.$message('请同意外教超市入驻学师说明')
          return
      }
      if(this.checked == -1){
          this.$message("请选择助学师种类")
          return
      }
      this.popup = 1;
      this.titleType = this.inList[this.checked].title
    },
    injoin(e) {
      this.checked = e;
    },
    Toread(){
      this.Isread = true
      this.agree  =false
    },
    TocloseRead(){
      this.Isread = false
      this.agree  =true
    }
  }
};
</script>
<style lang="less" scoped>
.popup_cover {
  width: 100%;
  height: 200px;
  /deep/.popup_uploader {
    width: 219px;
    height: 29px;
    border: 1px solid #c6c6c6;
    position: relative;
    top: -31px;
    left: 124px;
    font-size: 14px;
    color: #cbcbcb;
    border-radius: 5px;
    /deep/.el-upload {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: auto;
        height: 26px;
        max-width: 80%;
        margin-left: 109px;
      }
    }
  }
}
.popup_submit{
    position: absolute;
    text-align: center;
    bottom: 10px;
    left: 34%;
    color: #fff;
    width: 200px;
    border-radius: 30px;
    background-color: #47cecf;
    font-size: 17px;
    height: 30px;
    line-height: 30px;

}
.popup_content{
    width: 98%;
    margin-left: 5px;
    /deep/.el-select{
        width: 150px;
        height: 30px;
        .el-input {
            width: 221px;
        }
    }
    /deep/.el-input__inner{
        height: 30px;
    }
    /deep/.el-input__suffix{
        height: 40px;
        top: -3px;
    }
    input{
      height: 23px;
      width: 211px;
      border-radius: 5px;
      border: 1px solid #c6c6c6;
      color:#333;
      padding-left: 10px;
    }
    i{
      color:#f00;
    }
    .popup_introduction{
      width: 222px;
      height: 30px;
      /deep/.el-input__inner{
        height: 30px;
    }
    }
}
.popup_title{
    text-align: center;
    font-size: 22px;
    margin-top: 10px;
}
.popup_cloose{
  margin-right: 20px;
    width: 20px;
    height: 20px;
    font-size: 32px;
    float: right;
    margin-top: -39px;
    cursor: pointer;
}
.login {
  position: fixed;
  font-size: 24px;
  height: 610px;
  width: 560px;
  background-color: #fdfdfd;
  border-radius: 1.25rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1002;
    label{
        display: block;
        margin-top: 10px;
        font-size: 14px;
        margin-left: 67px;
        height: 30px;
        line-height: 30px;
        span{
            color: #2e2e2e;
            width: 114px;
            display: inline-block;
            margin-left: 4px;

        }
    }
}
.over {
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0.7; //透明度为70%
  filter: alpha(opacity=70);
  top: 0;
  left: 0;
  z-index: 1001;
  background-color: #111111;
}
.Studentteacher {
  position: relative;
  width: 100%;
  background: #ffffff;
  border-radius: 20px;
}
.Studentteacher-title {
  position: relative;
  width: 90%;
  height: 40px;
  margin: 0 auto;
  border-bottom: 1px solid #2dc7c8;
  padding-top: 40px;
  /deep/.el-breadcrumb {
    border-left: 14px solid #2dc7c8;
    padding-left: 2%;
  }
  /deep/.el-breadcrumb__inner {
    color: #2dc7c8 !important;
    font-size: 20px !important;
    font-weight: bold !important;
  }
  /deep/.el-breadcrumb__separator {
    color: #2dc7c8;
  }
  /deep/.el-breadcrumb__inner.is-link {
    color: #2dc7c8;
    font-size: 20px;
    font-weight: bold;
  }
}
.Studentteacher-con {
  position: relative;
  width: 100%;
  margin: 0 auto;
  margin-top: 20px;
  background-image: url("/images/背景图 拷贝@2x.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-bottom: 70px;
}
.Student-content {
  position: relative;
  width: 80%;
  height: 100%;
  margin: 0 auto;
}
.Student-content-head {
  position: relative;
  width: 100%;
  text-align: center;
  color: #ffffff;
  padding-top: 60px;
  h1 {
    letter-spacing: 10px;
  }
  h3 {
    letter-spacing: 10px;
  }
}
.Student-content-content {
  position: relative;
  width: 100%;
}
.Student-content-content > ul {
  list-style: none;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0%;
}
.Student-content-content > ul > li {
  width: 46%;
  height: auto;
  background: #ffffff;
  margin-top: 80px;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  div {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 88%;
  }
}
.Student-content-content > ul::after {
  content: "";
  width: 40%;
}
.List-title {
  display: flex;
  width: 100%;
  height: 60px;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: 24px;
  font-weight: bold;
  background: linear-gradient(0deg, rgba(255, 99, 68, 1), rgba(255, 42, 0, 1));
}
.List-price {
  display: flex;
  width: 80%;
  height: 25%;
  flex-wrap: wrap;
  border: 1px solid rgba(255, 76, 41, 1);
  border-radius: 30px;
  margin: 20px auto;
  span {
    display: flex;
    width: 100%;
    height: 50%;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    &:first-child {
      color: #ff4c29;
      font-weight: bold;
      font-size: 20px;
    }
  }
}
.Position-details,
.In-requirements {
  display: flex;
  width: 80%;
  padding: 0%;
  height: 40%;
  margin: 0 auto;
  font-size: 12px;
  flex-wrap: wrap;
  li {
    width: 100%;
    margin-top: 6px;
    list-style: none;
    list-style-position: inside;
    padding-left: 2%;
    &:first-child {
      color: #ff4c29;
      list-style: none;
      padding: 0%;
    }
  }
}
.Position-details > li:before,
.In-requirements > li::before {
  content: "\2022";
  color: #ff4c29;
  font-size: 15px;
}
.Position-details > li :last-child :before {
  content: none !important;
}
.In-requirements {
  margin-bottom: 40px;
  margin-top: 10px;
}
.Benefits-that {
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding-top: 30px;
}
.agreement {
  display: inline-block;
  width: 100%;
  text-align: center;
  margin-top: 30px;
  color: #ffffff;
  padding-bottom: 20px;
}
.Immediately-checkin {
  display: inline-block;
  width: 100%;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 50px;
  span {
    display: inline-block;
    width: 30%;
    color: #ffffff;
    height: 40px;
    line-height: 40px;
    background: linear-gradient(
      0deg,
      rgba(255, 99, 68, 1),
      rgba(255, 42, 0, 1)
    );
    border-radius: 20px;
    cursor: pointer;
  }
}
.Theselected {
  display: flex;
  width: 100%;
  height: 34px;
  justify-content: flex-end;
  img {
    padding-right: 4% !important;
  }
  margin-bottom: 10px;
}

.readagreements{
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1008;
  top: 0;
  left: 0;
}
.readagreement{
  position: fixed;
  font-size: 24px;
  height: 710px;
  width: 560px;
  background-color: #fdfdfd;
  left: 50%;
  top: 50%;
  overflow: auto;
  transform: translate(-50%, -50%);
  z-index: 1002;
}
</style>